<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步:引入echarts核心库 -->
    <script src="./echarts.js"></script>
    <style>
        .box {
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 1px dashed pink;
        }
    </style>
</head>

<body>
    <!-- 准备一个容器:展示图形图标地方 务必要有宽度与高度-->
    <div class="box"></div>
</body>

</html>
<script>
    //柱状图
    //第一步:echarts.init初始化echarts实例
    let mycharts = echarts.init(document.querySelector('.box'));
    //第二步:初始化配置项
    //设置配置项:(配置对象,里面K你能随便写吗?)
    let option = {
        //标题
        title: {
            //主标题内容
            text: '数据可视化',
            //子标题
            subtext: '柱状图',
            //主标题的颜色
            textStyle: {
                color: 'red'
            },
            //调整标题的位置
            left: '40%'
        },
        //x轴配置项
        xAxis: {
            //data:设置水平轴底部的文字
            //x轴设置data,Y轴轴线消息了
            data: ['军事', '游戏', '人生', '直播', '财经']

        },
        //y轴
        yAxis: {

        },
        //系列配置项:绝对重要,因为系列配置项能决定显示什么样的图形、图标
        series: {
            type: 'bar',//图标的类型------柱状图
            data: [10, 20, 30, 40, 50],//柱状图数据

            //图形上面标签展示
            label: {
                show: true,//展示文字标签
                rotate: 45,//旋转
                position: 'top',//文字位置
                color: 'yellowgreen',
                fontSize: 18,
                // backgroundColor: 'black',
                // shadowColor: 'yellow',
                // shadowOffsetX: 10,
            },


            // barWidth:20  设置柱状图宽度
            // color:'red' 设置柱状图的颜色 ---全部的颜色
            //设置每一个柱条的颜色
            // itemStyle:{
            //     normal:{
            //         color:(item)=>{
            //             let arr = ['red','orange','yellow','blue','purple'];
            //             return arr[item.dataIndex];
            //         }
            //     }
            // }
            itemStyle: {//设置全部柱状图的颜色,支持渐变
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'purple' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }
    };
    //设置配置项
    mycharts.setOption(option);
    //函数可以调用多次，可以修改原来配置项
    mycharts.setOption({
          title:{
              text:"修改标题"
          }
    });
</script>